import "./index.scss";
import React, { useState, useEffect } from "react";
import axios from "../../../../utils/http.jsx";
import {
  Button,
  Form,
  Input,
  Select,
  Table,
  Space,
  Modal,
  Radio,
  message,
} from "antd";

const CollectionCreateForm = ({ open, onCreate, onCancel, editInitial }) => {
  const [editForm] = Form.useForm();
  useEffect(() => {
    editForm.setFieldsValue(editInitial);
  }, [editInitial]);
  return (
    <Modal
      open={open}
      title="修改状态"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        editForm
          .validateFields()
          .then((values) => {
            editForm.resetFields();
            onCreate(values);
          })
          .catch((info) => {
          });
      }}
    >
      <Form form={editForm}>
        <Form.Item label="选择状态" style={{ width: "250px" }} name="status">
          {/* defaultValue="全部" */}
          <Select placeholder="请选择">
            <Select.Option value="已使用">已使用</Select.Option>
            <Select.Option value="未使用">未使用</Select.Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};
const AddRedPacket = () => {
  // 消息提示
  const [messageApi, contextHolder] = message.useMessage();
  //获取红包详情
  useEffect(() => {
    getRed();
  }, []);
  //获取广告数据
  const getRed = () => {
    axios({
      url: "/red/getRedDetailed",
      method: "get",
      params: {
        floor_id: 1,
      },
    })
      .then((res) => {
        setDataList(res.data);
      })
      .catch((err) => {});
  };
  // 搜索数据
  const [form] = Form.useForm();
  // 搜索方法
  const searchBtn = (params) => {
    if (params.status == undefined) {
      params.status = "";
    } else if (params.keywords == undefined) {
      params.keywords = "";
    }
    axios({
      url: "/red/getSingleRedDetailed",
      method: "get",
      params: {
        floor_id: 1,
        status: params.status,
        user: params.keywords,
      },
    })
      .then((res) => {
        setDataList(res.data);
      })
      .catch((err) => {});
  };
  // 清空
  const clear = () => {
    form.resetFields();
    getRed();
  };
  // 表格数据
  const [dataList, setDataList] = useState([]);
  // 表格列
  const columns = [
    {
      title: "编号", //表格列名
      dataIndex: "id", //该列对应数据字段
      key: "id", //该列唯一值
      align: "center",
    },
    {
      title: "用户", //表格列名
      dataIndex: "user", //该列对应数据字段
      key: "user", //该列唯一值
      align: "center",
    },
    {
      title: "二维码",
      dataIndex: "code",
      key: "code",
      render: (_, record) => (
        <Space size="middle">
          <img className="code" src={"/api" + record.code} alt="" />
        </Space>
      ),
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      align: "center",
    },
    {
      title: "领取时间",
      dataIndex: "date",
      key: "date",
      align: "center",
    },
    {
      title: "操作",
      align: "center",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              editFrom(record);
            }}
          >
            编辑状态
          </a>
        </Space>
      ),
    },
  ];
  //编辑弹出框
  const [open, setOpen] = useState(false);
  const [editInitial, setEditInitial] = useState({});
  const [editId, setEditId] = useState();
  const editFrom = (record) => {
    let initialData = {
      status: record.status,
    };
    setEditInitial(initialData);
    setEditId(record.id);
    setOpen(true);
  };
  // 确认编辑
  const onCreate = (values) => {
    // setOpen(false);
    axios({
      url: "/red/updateRedDetailed",
      method: "post",
      data: {
        id: editId,
        status: values.status,
      },
    })
      .then((res) => {
        if (res.code == 200) {
          messageApi.open({
            type: "success",
            content: "修改成功！",
          });
          setOpen(false);
          getRed();
        }
      })
      .catch((err = {}));
  };
  return (
    <div>
      {contextHolder}
      <div className="RedPacket">
        <div className="RedPacketDiv">查看红包详情</div>
      </div>
      {/* 搜索栏 */}
      <div className="RedPacketFrom">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          onFinish={searchBtn}
        >
          <Form.Item label="状态" style={{ width: "200px" }} name="status">
            {/* defaultValue="全部" */}
            <Select placeholder="请选择">
              <Select.Option value="已使用">已使用</Select.Option>
              <Select.Option value="未使用">未使用</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="keywords" label="用户">
            <Input placeholder="请输入用户名称" />
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => (
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
            )}
          </Form.Item>
          <Form.Item>
            <Button onClick={clear}>清空</Button>
          </Form.Item>
        </Form>
      </div>
      {/* 表格 */}
      <div>
        <Table
          className="RedPacketTable"
          columns={columns}
          pagination={{
            defaultCurrent: 1,
            total: dataList.length,
            defaultPageSize: 5,
            // 只有一页的时候是否隐藏
            // hideOnSinglePage: true,
          }}
          dataSource={dataList}
          rowKey={(record) => record.id}
        />
      </div>
      {/* 编辑状态 */}
      <div>
        <CollectionCreateForm
          open={open}
          onCreate={onCreate}
          onCancel={() => {
            setOpen(false);
          }}
          editInitial={editInitial}
        />
      </div>
    </div>
  );
};

export default AddRedPacket;
